 /**
 * Created by Delicate on 2018/1/12.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,
} from 'react-native';

import NavBar from '../../components/NavBarView'
import {
    FormStatus,
    FormEvent,
    DefaultField,
    DefaultFieldType,
    DefaultTextArea,
    DefaultUpload,
    SubmitBtn
} from '../../components/Form'
import SystemService from '../../services/System'

let _self = null;

const validRule = {
    feedback_content: {
        required: true,
    },
    file_id: {
        required: false
    },
}

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;
        this.state = {
            formStatus: FormStatus.EDIT,
            form: {
                feedback_content: '',
                file_id: ''
            }
        }
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    async uploadFile(uri, loadingStart, loadingEnd) {
        let options = {
            params: {uri}
        };
        loadingStart();
        const {result, message, data} = await SystemService.feedBackUpload(options);
        loadingEnd();
        if(result){
            _self.inputChange('file_id',data.id)
        }else {
            Toast.show(message);
        }
    }

    async submit() {
        const {result, message} = FormEvent.isValid(validRule, _self.state.form);
        if(result) {
            const {result, message} = await SystemService.feedBackSubmit({params: _self.state.form});
            if(result){
                Toast.show('提交成功，感谢您的反馈！');
                _self.props.navigation.goBack();
            }else{
                Toast.show(message);
            }
        }else{
            Toast.show(message);
        }
    }

    //input改变触发
    inputChange(key, value) {
        let form = _self.state.form;
        form[key] = value;
        _self.setState({form}, () => {
            setTimeout(() => {
                _self.setState({
                    formStatus: FormEvent.isCompleted(validRule, _self.state.form)
                })
            }, 200);
        });
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar host={this} title="意见反馈"/>
                <ScrollView style={styles.container}>
                    <DefaultField style={styles.item} last={true} type={DefaultFieldType.BLOCK} text="问题和意见">
                        <DefaultTextArea
                            onChangeText={(text) => this.inputChange('feedback_content', text)}
                            inputValue={this.state.form.feedback_content}
                            style={styles.textArea}
                            placeholder="请输入问题描述，以便我们提供更好的帮助"
                            maxLength={200}
                            control={this.state.formStatus}/>
                    </DefaultField>
                    <DefaultField
                        subText="（提供问题截图，非必填）"
                        style={styles.item}
                        last={true}
                        type={DefaultFieldType.BLOCK}
                        text="图片">
                        <DefaultUpload
                            title="选择问题截图"
                            control={this.state.formStatus}
                            updateEvent={(uri, start, end)=>this.uploadFile(uri, start, end)}/>
                    </DefaultField>
                </ScrollView>
                <View style={styles.btnBox}>
                    <SubmitBtn
                        control={this.state.formStatus}
                        style={styles.btn}
                        text="提交"
                        onPress={()=>this.submit()}/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        marginBottom: layout.GAP_VERTICAL_MID,
        backgroundColor: '#fff'
    },
    textArea: {
        height: layout.height(250),
    },
    btnBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_SMALL,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        backgroundColor: '#fff'
    },
    btn: {
        marginTop: 0,
        height: layout.height(90)
    }
})

//路由
const Feedback = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'Feedback',
    sign: true
};

export default Feedback;